<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
    *{margin: 0;padding: 0;}
    img{width: 728px;height: 416px;}
    div{width: 50px;height: 50px;border: 1px solid #fff;background: #fff;position: absolute;left: 0;top: 0;margin: 0;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Div = document.getElementsByTagName('div');
    	for (var i = 0; i < 112; i++) {
        document.body.innerHTML += "<div></div>";
      };
      for (var i = 0; i < Div.length; i++) {
        if(i < 14){
          Div[i].style.left = 52 * i + "px";
        }else{
          Div[i].style.left = (i % 14) * 52 + "px";
           Div[i].style.top = parseInt(i / 14) * 52 + "px";
        }
      };
      for (var i = 0; i < Div.length; i++) {
        Div[i].onmouseover = function(){
          this.style.background = "transparent";
        }
      };
    }
  </script>
</head>
<body>
 	<img src="images/2.jpg">
</body>
</html>